<template>
  <el-form ref="ruleFormRef" :model="formInline" :rules="formRules" label-width="auto" v-loading="isLoading"
    label-position="top">
    <el-row :gutter="30">
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item :label="titles?.taskName" prop="taskName">
          <el-input :maxlength="30" :show-word-limit="true" v-model.trim="formInline.taskName" clearable
            :placeholder="prompt?.taskName" />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item :label="titles?.projectName" prop="">
          {{ isNullOrEmpty(formInline.id ? formInline.projectName : operate.projectName) }}
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item :label="titles?.status" prop="status">
          <el-radio-group v-model="formInline.status">
            <el-radio v-for="item in STRATEGYSTATUS" :key="item.value" :value="item.value">
              {{ isNullOrEmpty(item.label) }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item :label="titles?.cycle" prop="cycle">
          <el-radio-group v-model="formInline.cycle">
            <el-radio v-for="item in PERIODUNIT" :key="item.value" :value="item.value">
              {{ isNullOrEmpty(item.label) }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="产品类型" prop="productId">
          <opateproductSelect style="width: 100%" v-model="formInline.productId" @change="changeProduct"
            @blur="formValidateField(ruleFormRef, 'productId')" />
        </el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="计划任务" prop="">
          <el-table :data="formInline.planTask" border style="width: 100%" footer-row-class-name="hide">
            <el-table-column prop="day" label="时间" minWidth="250" show-overflow-tooltip>
              <template v-slot="{ row }">
                <div class="flex items-center">
                  <el-select v-model="row.w" v-if="formInline.cycle == 2">
                    <el-option v-for="item in SELECT_DAY" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                  <div class="px-[5px]" v-if="formInline.cycle == 2">周</div>
                  <el-input v-if="formInline.cycle > 3" v-model.trim="row.mon" type="number" :min="0" :max="12"
                    placeholder="" />
                  <div class="px-[5px]" v-if="formInline.cycle > 3">月</div>
                  <el-input v-if="formInline.cycle > 2" v-model.trim="row.d" type="number" :min="0" :max="31"
                    placeholder="" />
                  <div class="px-[5px]" v-if="formInline.cycle > 2">日</div>
                  <el-input v-model.trim="row.h" type="number" :min="0" :max="24" placeholder="" />
                  <div class="px-[5px]">时</div>
                  <el-input v-model.trim="row.m" :min="0" type="number" :max="60" placeholder="" />
                  <div class="px-[5px]">分</div>
                  <el-input v-model.trim="row.s" :min="0" :max="60" type="number" placeholder="" />
                  <div class="px-[5px]">秒</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="noticeUser" label="任务" show-overflow-tooltip width="160">
              <template v-slot="scope">
                <el-select @change="changecommand($event, scope)" v-model="scope.row.command" filterable remote
                  remote-show-suffix>
                  <el-option v-for="item in options" :key="item.id" :label="item.commandName" :value="item.id" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="noticeUser" label="命令参数" show-overflow-tooltip width="160">
              <template v-slot="{ row }">
                <el-select v-model="row.param" filterable remote v-if="row?.commandata?.paramType == 3"
                  remote-show-suffix>
                  <el-option v-for="item in row?.commandata?.value3" :key="item.value" :label="item.key"
                    :value="item.value" />
                </el-select>

                <el-input v-else-if="row?.commandata?.paramType == 2" v-model.trim="row.param"
                  :min="row?.commandata?.value2[0]" :max="row?.commandata?.value2[1]" type="number"
                  :placeholder="`请输入${row?.commandata?.value2[0]}-${row?.commandata?.value2[1]}`" />
                <span v-else>{{ isNullOrEmpty(row?.commandata?.value1) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="操作" width="90">
              <template v-slot="scope">
                <el-space>
                  <sj-link custom-type="sred" :underline="false" @click="deletes(scope)">删除</sj-link>
                </el-space>
              </template>
            </el-table-column>
          </el-table>
          <div class="footer-wrapper">
            <el-table :data="[100]" :show-header="false" :border="true" class="footer-table">
              <el-table-column label="">
                <template #default>
                  <div class="text-center cursor-pointer py-[10px]" :disabled="true" @click="addsetup">
                    添加
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>

<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'
import { getDeviceCommand } from "@/api/operate/daily-inspection/Inspection-tasks/index";
import opateproductSelect from "@/components/select/opateproductSelect/opateproductSelect.vue";
import { ref, reactive } from "vue";
import { usePageVariablesStoreHook } from "@/store/modules/pageVariables";
const operate = usePageVariablesStoreHook().getOperate();
import ReCol from "@/components/ReCol";
import type { FormRules } from "element-plus";
import { titles, prompt } from "./index";
import {
  WORKORDER_TYPE,
  WORKORDER_DISPATCH_TYPE
} from "@/constant/workorder-mangenment";
import { SELECT_DAY } from "@/constant/alarm-mangenment";
import { PERIODUNIT } from "@/constant/dayly-inspection";
import { STRATEGYSTATUS } from "@/constant/device-mangenment";
import type { infoType } from "@/api/operate/timed-tasks/index";
import { formValidateField } from '@/utils/functions'
type FormProps = {
  formInline: infoType;
  isLoading: boolean;
  projectName: string;
};
const options = ref([])
const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({}) as infoType,
  isLoading: false
});
const getoptions = () => {
  getDeviceCommand({ productId: props.formInline.productId }).then(res => {
    options.value = res.result.data;
    if (props.formInline.planTask && props.formInline.planTask.length > 0) {
      props.formInline.planTask.forEach(item => {
        if (item.command) {
          let indexdata = options.value.filter(items => {
            console.log(items.id, item.command, "items")
            return items.id == item.command
          });
          item.commandata = indexdata[0]
        }
      });
    }
  });
}
watch(
  () => props.formInline.productId,
  val => {
    if (val) {
      getoptions()
    }
  },
  { immediate: true }
);
const formRules = reactive(<FormRules>{
  productName: [
    { required: true, message: prompt?.productName, trigger: "blur" }
  ],
  taskName: [{ required: true, message: prompt?.taskName, trigger: "blur" }],
  status: [{ required: true, message: prompt?.status, trigger: "blur" }],
  cycle: [{ required: true, message: prompt?.cycle, trigger: "blur" }],
  productId: [{ required: true, message: prompt?.productId, trigger: "blur" }],
  planTask: [{ required: true, message: "请添加任务", trigger: "blur" }]
});
const changeProduct = (e) => {
  props.formInline.planTask.forEach(item => {
    item.command = null
    item.commandata = null
    item.param = null
  })
}
const ruleFormRef = ref();
//    const newFormInline = ref(props.formInline as any);
//
//
//    watch(()=>props.formInline,()=>{
//    	newFormInline.value = props.formInline
//    },{
//    	deep:true,
//    	immediate:true
//    })
function getRef() {
  return ruleFormRef.value;
}
//添加步骤
const addsetup = () => {
  props.formInline.planTask.push({
    w: "",
    mon: "",
    d: "",
    h: "",
    m: "",
    s: "",
    command: "",
    param: ""
  });
};
//删除步骤
const deletes = ite => {
  props.formInline.planTask.splice(ite.$index, 1);
};
const changecommand = (id, scope) => {
  scope.row.param = null
  let indexdata = options.value.filter(item => {
    return item.id == id
  });
  props.formInline.planTask[scope.$index].commandata = indexdata[0]
}
defineExpose({ getRef });
</script>
<style scoped lang="scss">
.hide {
  display: none;
}

/* 设置尾部添加的行的样式 */
.footer-wrapper {
  margin-top: -1px;
  /* 重叠原表格的分隔线 */
  width: 100%;

  ::v-deep(.el-table__cell) {
    padding: 0 !important;
  }
}

.footer-table .el-table__row {
  padding: 0 !important;
  background-color: #f2f2f2;
  /* 设置合计行的背景色 */
}
</style>
